<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>乐购首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/purchase/index.min.css?v=<%=$version%>">
</head>
<body>
<div id="purchaseIndex" v-cloak>
    <!--:class="{'purchase-header1':isNav==2}"-->
    <div class="purchase-header" :class="{'purchase-header1':isNav==2}">
        <!--<span class="header-share"></span>-->
        <div class="header-sear" @click="getNext(7)">
            请输入商品名称
        </div>
        <strong class="header-news" @click="getNext(2)">{{cartCountNum}}</strong>
        <span class="header-cart" @click="getNext(2)"></span>
    </div>
    <div class="purchase-slider clearfix">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" :style="bgimg(item.imgSrc)" v-for="item in mainList.carousels" :key="item.productId">
                    <!--<div class="slide-div">-->
                        <!--<span class="slide-left"></span>-->
                        <!--<div class="slide-right">张女士在拼团中抢到8折优惠券</div>-->
                    <!--</div>-->
                    <!--<img src="/imgs/purchase/index/ps.png" class="swiper-lazy">-->

                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="purchase-nav clearfix">
        <span v-for="item in mainList.categorys" :style="bgimg(item.imgSrc)" @click="getNext(3,item)">{{item.categoryName}}</span>
        <!--<span class="nav-more" @click="getNext()">更多分类<strong class="nav-hot"></strong></span>-->
    </div>
    <div class="purchase-advImg clearfix">
        <span class="purchase-img1" @click="getNext(4)"></span>
        <span class="purchase-img2" @click="getNext(6)"></span>
    </div>
    <div class="purchase-bursting">
        <div class="purchase-title purchase-icon3">
            <span class="purchase-titleRight" @click="getNext(5)">更多</span>
        </div>
        <div id="bursting-slide">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in mainList.luckyVoucher" @click="getNext(5,item)">
                        <strong class="coupon-lableIcon"></strong>
                        <span class="coupon-txt">{{item.discount}}折</span>
                        <strong class="slide-img" :style="bgimg(item.imgSrc)"></strong>
                        <h6>{{item.title}}</h6>
                        <span class="purchase-icon2"></span>
                        <p><span class="bursting-money"><span>&yen;</span>{{item.discountIntegral}}</span>&yen;&nbsp;<del>{{item.integral}}</del></p>
                        <div class="slide-data slide-data1" v-if="hours>=0&&minutes>=0&&seconds>0&&item.sortDate==0">限购时间&nbsp;<span>{{hours}}</span>:<span>{{minutes}}</span>:<span>{{seconds}}</span></div>
                        <div class="slide-data" v-else>即将开始&nbsp;<span>00</span>:<span>00</span>:<span>00</span></div>
                    </div>
                    <!--<div class="swiper-slide">-->
                        <!--<strong class="purchase-icon6"></strong>-->
                        <!--<strong class="slide-img"></strong>-->
                        <!--<h6>的简历看数据的简历看数据</h6>-->
                        <!--<span class="purchase-icon2"></span>-->
                        <!--<p><span class="bursting-money"><span>&yen;</span>300</span>&yen;&nbsp;600</p>-->
                        <!--&lt;!&ndash;<div class="slide-data">即将开始&nbsp;<span>00</span>:<span>00</span>:<span>00</span></div>&ndash;&gt;-->
                        <!--<div class="slide-data slide-data1">限购时间&nbsp;<span>00</span>:<span>00</span>:<span>00</span></div>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>
    <div class="purchase-selected">
        <div class="purchase-title purchase-icon4">
            <!--<span class="purchase-titleRight" @click="getNext(9)">更多</span>-->
        </div>
        <div id="selected-slide">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in mainList.selectedProducts" @click="getNext(1,item.productId)">
                        <strong :style="bgimg(item.imgSrc)"></strong>
                        <h6>{{item.title}}</h6>
                        <p>&yen;{{item.integral}}</p>
                    </div>
                    <!--<div class="swiper-slide">-->
                        <!--<strong></strong>-->
                        <!--<h6>防守反击是龙卷风防守反击是龙卷风防守反击是龙卷风</h6>-->
                        <!--<p>&yen;300.00</p>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>
    <div class="purchase-advImg1"></div>
<!--    <div class="purchase-shops">  @click="getNext(8)"
        <div class="shops-tab">
            &lt;!&ndash;<strong class="active">精选</strong>&ndash;&gt;
            <strong v-for="item in mainList.hotsShops" :class="{'active':item.categoryId==categoryId}" @click="getShop(item.categoryId)">{{item.categoryName}}</strong>
            &lt;!&ndash;<span></span>&ndash;&gt;
            &lt;!&ndash;<strong>百货</strong>&ndash;&gt;
            &lt;!&ndash;<span></span>&ndash;&gt;
            &lt;!&ndash;<strong>奢侈品</strong>&ndash;&gt;
        </div>
        <div class="shops-cent clearfix">
            <a v-for="item in shopsList&&shopsList.shops" :href="'/purchase/shopIndex?shopId='+item.shopId"><strong :style="bgimg(item.imgSrc)"></strong>{{item.name}}</a>
            &lt;!&ndash;<a><strong></strong>大嘴猴官方旗舰店</a>&ndash;&gt;
            &lt;!&ndash;<a><strong></strong>大嘴猴官方旗舰店</a>&ndash;&gt;
        </div>
    </div>-->
    <div class="goodsList-cent clearfix">
        <a class="goodsList-list" v-for="item in productList2" :href="'/purchase/goodsDetails?type=1&productId='+item.productId">
            <div class="follow-centImg" :style="bgimg(item.imgSrc)"></div>
            <h6>{{item.title}}</h6>
            <span>可用折扣券</span>
            <p>售价：<strong class="follow-centMoney">&yen;<strong>{{item.integral}}</strong></strong></p>

        </a>
        <!--<a class="goodsList-list" v-for="item in productList2" :href="'/purchase/goodsDetails?type=1&productId='+item.productId">-->
        <!--<div class="follow-centImg" :style="bgimg(item.imgSrc)"></div>-->
        <!--<h6>{{item.title}}</h6>-->
        <!--<p>{{item.subtitle}}</p>-->
        <!--<span class="follow-centMoney">{{item.integral}}</span>-->
        <!--</a>-->

    </div>
    <footer-view :number="2"></footer-view>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="/js/purchase/index.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper(".purchase-slider .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    var swiper2 = new Swiper("#selected-slide .swiper-container",{
        spaceBetween: 10,
        slidesPerView: 'auto',
        freeMode: true,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 3
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    var swiper = new Swiper('#bursting-slide .swiper-container', {
        spaceBetween: 10,
        slidesPerView: 'auto',
        freeMode: true,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 3
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    $("img.lazy").lazyload();
</script>
</body>
</html>